<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <div id="main"></div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <el-calendar class="homeCalendar" v-model="value">
          </el-calendar>    
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8"><div class="grid-content bg-purple"><div class="ba1">
            <img src="@/assets/common/defaultHead.png" alt="">
          </div>
          <div class="ba2">江苏传智播客教育科技股份有限公司</div>
          <span class="ba3">体验版</span>
          <div class="ba4">管理员  |  传智博客-总裁办</div>
        </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:"Home",
    data(){

      return {
        value: new Date()
      }
    },
    mounted(){
      this.echartsFun();
    },
    methods:{
      echartsFun(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {}
            }
          ]
        }
        myChart.setOption(option);
        }
      }
  }
</script>

<style scoped>

#main,.homeCalendar {
  height: 60vh;
}
.el-row {
    margin-bottom: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .ba1{
  width: 60px;
  height: 60px;
  float: left;
}
.ba1 img{
  width: 100%;
  height: 100%;
  margin: 20px 10px;
}
.ba2{
    font-size: 20px;
    float: left;
    margin: 20px 10px;
}
.ba3{
    font-size: 15px;
    float: left;
    margin: 25px 10px;
    background-color: rgba(0, 0, 0, 0.3);
}
.ba4{
    font-size: 20px;
    width: 500px;
    /* margin: 10px 10px; */
    margin-top: 50px;
    margin-left: 69px;
    position: absolute;
}
</style> 


